@import "../style/scss_common";

.container {
  background: #282A31;
  width: 100%;
  height: 100%;
  padding: 0 j(56);
  overflow-y: scroll;

  .title {
    .back {
      text-align: left;
      position: absolute;
    }

    font-size: j(48);
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: rgba(159, 166, 175, 1);
    line-height: j(62);
    border-bottom: j(2) solid #6D7278;
    padding-bottom: j(24);
    text-align: center;
    padding-top: j(46);
  }
}

.meter-title {
  font-size: j(36);
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: rgba(230, 241, 255, 1);
  line-height: j(48);
  text-align: center;
  margin-bottom: j(10);
}

.meter-address {
  font-size: j(28);
  font-family: MicrosoftYaHei;
  color: #E6F1FF;
  line-height: j(38);
  text-align: center;
  padding-bottom: j(8);
}

.meter {
  background: rgba(216, 216, 216, 0.1);
  margin-bottom: j(40);
  border-radius: j(16);
  padding: j(20) j(28);

  .meter-row {
    display: flex;
    margin-bottom: j(14);
    margin-left: j(46);

    .label {
      font-size: j(28);
      font-family: MicrosoftYaHei;
      color: rgba(159, 166, 175, 1);
      line-height: j(52);
      margin-right: j(20);
    }

    .text {
      display: flex;
      justify-content: space-between;
      flex: 1;
      height: j(52);
      background: rgba(109, 114, 120, 1);
      border-radius: j(8);
      padding: j(0) j(16);
      font-size: j(32);
      font-family: MicrosoftYaHei;
      color: rgba(230, 241, 255, 1);
      line-height: j(52);

      .suffix {
        font-size: j(28);
        font-family: MicrosoftYaHei;
        color: rgba(159, 166, 175, 1);
      }
    }
  }

  .detail {
    display: flex;
    border-top: j(2) solid #3D404A;
    padding-top: j(10);

    .status {
      img {
        width: j(126);
        height: j(122);
      }

      .text {
        border-radius: j(10);
        height: j(52);
        font-size: j(24);
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: j(52);
        opacity: 0.7;
        text-align: center;
      }
    }

    .status.normal {
      .text {
        background: rgba(13, 255, 154, 0.09);
        color: rgba(13, 255, 154, 1);
      }
    }

    .status.arrearage {
      .text {
        background: rgba(224, 32, 32, 0.3);
        color: #FF0000;
      }
    }

    .energy {
      flex: 1;
    }
  }
}

.btn {
  width: j(132);
  height: j(52);
  border-radius: j(10);
  padding: j(0) j(18);
  font-size: j(24);
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  line-height: j(32);
  margin-left: j(14);
}

.btn-read {
  background: linear-gradient(360deg, rgba(0, 145, 255, 1) 0%, rgba(50, 197, 255, 1) 100%);
  color: rgba(52, 55, 64, 1);
  margin-left: j(20);
}

.btn-charge {
  background: linear-gradient(180deg, rgba(30, 255, 202, 1) 0%, rgba(14, 173, 112, 1) 100%);
}

.btn-record {
  background: linear-gradient(180deg, rgba(252, 219, 0, 1) 0%, rgba(247, 181, 0, 1) 100%);
}
